<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Aizen
  Date: 2021/11/30
  Time: 10:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>花礼网后台管理系统</title>
    <base href="http://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="css/Top.css">
    <link rel="stylesheet" href="css/Left.css">
    <link rel="stylesheet" href="css/manage.css">
    <script src="js/echarts.min.js"></script>
    <style>
        #main{
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>

<div class="container-fluid">

    <div class="row">
        <div class="col-md-2"><%@include file="Left.jsp"%></div>
        <div class="col-md-10 col-md-offset-2"><%@include file="Top.jsp"%></div>
        <c:set value="${requestScope.statistics}" var="s"></c:set>
        <div class="col-md-10  col-md-offset-2">
            <h2 id="t">数据统计</h2>
            <div class="box1"><div id="daydata">当日数据：</div>
                <span class="dayadd"><span>${requestScope.statistics.addUser}</span> 新增用户</span>
                <span class="dayadd"><span>${requestScope.statistics.addOder}</span> 新增订单</span>
                <span class="dayadd"><span>${requestScope.statistics.addGoods}</span> 新增商品</span>
                <span class="dayadd"><span>${requestScope.statistics.addAdminUser}</span> 新增管理员</span>
            </div>
            <br>
            <div class="box2"><div id="sumdata">总数据：</div>
                <span class="dayadd"><span>${requestScope.statistics.sumUser}</span> 注册用户</span>
                <span class="dayadd"><span>${requestScope.statistics.sumOder}</span> 订单</span>
                <span class="dayadd"><span>${requestScope.statistics.sumGoods}</span> 商品</span>
                <span class="dayadd"><span>${requestScope.statistics.sumAdminUser}</span> 管理员</span>
            </div>
<%--            曲线图--%>
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="main" style="width: 800px;height:400px;"></div>
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));


                // 指定图表的配置项和数据
                option = {
                    title: {
                        text: '走势图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['用户', '商品', '订单', '管理员']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['${s.dayDateTime[0]}', '${s.dayDateTime[1]}', '${s.dayDateTime[2]}', '${s.dayDateTime[3]}', '${s.dayDateTime[4]}', '${s.dayDateTime[5]}', '${s.dayDateTime[6]}']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '用户',
                            type: 'line',
                            data: [${s.zhouUser[0]}, ${s.zhouUser[1]}, ${s.zhouUser[2]}, ${s.zhouUser[3]}, ${s.zhouUser[4]}, ${s.zhouUser[5]}, ${s.zhouUser[6]}]
                        },
                        {
                            name: '商品',
                            type: 'line',
                            data: [${s.zhouGoods[0]}, ${s.zhouGoods[1]}, ${s.zhouGoods[2]}, ${s.zhouGoods[3]}, ${s.zhouGoods[4]}, ${s.zhouGoods[5]}, ${s.zhouGoods[6]}]
                        },
                        {
                            name: '订单',
                            type: 'line',
                            data: [${s.zhouOder[0]}, ${s.zhouOder[1]}, ${s.zhouOder[2]}, ${s.zhouOder[3]}, ${s.zhouOder[4]}, ${s.zhouOder[5]}, ${s.zhouOder[6]}]
                        },
                        {
                            name: '管理员',
                            type: 'line',
                            data: [${s.zhouAdminUser[0]}, ${s.zhouAdminUser[1]}, ${s.zhouAdminUser[2]}, ${s.zhouAdminUser[3]}, ${s.zhouAdminUser[4]}, ${s.zhouAdminUser[5]}, ${s.zhouAdminUser[6]}]
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            </script>

        </div>



    </div>
</div>
</body>
<script>
    $(function (){
        $("#ul li:first-child a").css("color","red");
    })
</script>
</html>
